<template>
  <view class="container">
    <view class="orderinfo">
      <view style="display: flex; align-items: center">
        <text style="font-weight: bold; font-size: 36rpx; color: #222222">订单关闭</text>
        <uni-icons type="right" size="20"></uni-icons>
      </view>
      <!-- 时间 -->
      <view class="flex" style="margin-top: 36rpx">
        <image src="../../static/mine/time.png" style="width: 28rpx; height: 28rpx; margin-right: 14rpx" mode=""></image>
        <text style="font-weight: 500; font-size: 28rpx; color: #222222">2024-03-02 15:30</text>
      </view>
      <!-- 起点 -->
      <view class="flex" style="margin-top: 28rpx; margin-bottom: 42rpx">
        <image src="../../static/mine/start.png" style="width: 24rpx; height: 24rpx; margin-right: 14rpx" mode=""></image>
        <text style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: bold; font-size: 28rpx; color: #222222">万达广场</text>
      </view>
      <!-- 终点 -->
      <view class="flex" style="margin-bottom: 28rpx">
        <image src="../../static/mine/end.png" style="width: 24rpx; height: 24rpx; margin-right: 14rpx" mode=""></image>
        <text style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: bold; font-size: 28rpx; color: #222222">
          中山路22号中山路中山路中山路中山路中山路中山路中山路中山路中山路中山路中山路中山路中山路中山路中山路中山路中山路中山路中山路
        </text>
      </view>
      <!-- 手机号 -->
      <!--  <view class="flex">
        <image src="../../static/order/phonenumber.png" style="width: 22rpx; height: 24rpx; margin-right: 14rpx" mode=""></image>
        <text style="font-weight: 500; font-size: 28rpx; color: #222222">18537158964</text>
      </view> -->
    </view>
    <view class="driverinfo">
      <image src="../../static/images/logo.png" style="border-radius: 50%; width: 100rpx; height: 100rpx; margin-right: 10rpx" mode=""></image>
      <view class="iofo">
        <view class="top">
          <text style="margin-right: 18rpx; font-weight: bold; font-size: 30rpx; color: #222222">王师傅</text>
          <text style="font-weight: 500; font-size: 30rpx; color: #222222">SJ5875901</text>
        </view>
        <view>
          <text style="font-weight: 500; font-size: 28rpx; color: #f2860a">4.9</text>
          <image src="../../static/order/xingxing.png" style="width: 26rpx; height: 26rpx; vertical-align: middle; margin-left: 8rpx; margin-right: 34rpx" mode=""></image>
          <text style="font-weight: 500; font-size: 26rpx; color: #222222">16年驾龄</text>
          <text style="padding: 0 10rpx; font-weight: 500; font-size: 26rpx; color: #222222">|</text>
          <text style="font-weight: 500; font-size: 26rpx; color: #222222">213单</text>
        </view>
      </view>
      <image @click="makephone" src="../../static/order/bluephone.png" mode="" style="width: 64rpx; height: 64rpx; margin-left: 160rpx"></image>
    </view>
    <!-- 付款金额 -->
    <!--   <view style="text-align: center; margin-top: 44rpx" @click="gomoneydetail">
      <text style="font-weight: 500; font-size: 26rpx; color: #222222">实付金额</text>
      <text style="font-weight: bold; font-size: 48rpx; color: #ec0000">39.00</text>
      <text style="font-weight: 500; font-size: 26rpx; color: #ec0000">元</text>
      <uni-icons type="right" size="10"></uni-icons>
    </view>
    <view style="text-align: center; font-weight: 500; font-size: 26rpx; color: #666666">金额已原路返回</view> -->
    <!-- 用户取消订单 -->
    <view class="cancelorder">
      <view style="font-weight: bold; font-size: 30rpx; color: #222222">用户取消</view>
      <view class="flex sb" style="font-weight: 500; font-size: 28rpx; color: #222222; margin-top: 34rpx; margin-bottom: 30rpx">
        <view>取消时间</view>
        <view>2023-02-22 09:23:12</view>
      </view>
      <view class="flex sb" style="font-weight: 500; font-size: 28rpx; color: #222222">
        <view>取消原因</view>
        <view>临时改变行程</view>
      </view>

      <view class="flex sb" style="font-weight: 500; font-size: 28rpx; color: #222222; margin: 30rpx 0">
        <view>司机等待时长</view>
        <view>18分32秒</view>
      </view>
      <view class="flex sb" style="font-weight: 500; font-size: 28rpx; color: #222222; margin: 30rpx 0">
        <view>超时费</view>
        <view>9元</view>
      </view>
      <view class="flex sb" style="font-weight: 500; font-size: 28rpx; color: #222222; margin: 30rpx 0">
        <view>预付金额</view>
        <view>36.3元</view>
      </view>
      <view class="flex sb" style="font-weight: 500; font-size: 28rpx; color: #222222; margin: 30rpx 0">
        <view>需补差价</view>
        <view>12.7元</view>
      </view>
      <view class="flex sb" style="font-weight: 500; font-size: 28rpx; color: #222222; margin: 30rpx 0">
        <view>支付时间</view>
        <view>2023-02-22 09:23:12</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      rateValue: 0
    };
  },
  methods: {
    makephone() {
      uni.makePhoneCall({
        phoneNumber: this.obj.driver.mobile
      });
    },
    // 跳转到计费详情
    gomoneydetail() {
      uni.navigateTo({
        url: '/pages/moneydetail/moneydetail'
      });
    }
  }
};
</script>

<style lang="scss" scoped>
// ::v-deep .uni-rate {
//   justify-content: center !important;
// }
.flex {
  display: flex;
  align-items: center;
}
.sb {
  justify-content: space-between;
}
.container {
  box-sizing: border-box;

  .orderinfo {
    box-sizing: border-box;
    width: 702rpx;
    height: 364rpx;
    background: #ffffff;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    margin: 34rpx 24rpx 20rpx 34rpx;
    padding: 45rpx 20rpx;
  }
  .driverinfo {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    width: 702rpx;
    height: 174rpx;
    background: #eff6ff;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    margin: 20rpx 24rpx;
    padding: 37rpx 20rpx;
    .iofo {
    }
  }
  .cancelorder {
    box-sizing: border-box;
    width: 702rpx;
    height: 552rpx;
    background: #ffffff;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    margin: 42rpx 24rpx 0 24rpx;
    padding: 36rpx 26rpx;
  }
}
</style>
<style>
page {
  background-color: #f8f9fa;
}
</style>
